<template>
<table class="table table-striped table-hover table-sm" id="passengerList">
  <thead>
    <tr>
      <th>中文名</th>
      <th>First/Last Name</th>
      <th>VIP</th>
      <th>性别</th>
      <th>生日</th>
      <th>国籍</th>
      <th>证件</th>
      <th>Email</th>
      <th>手机</th>
      <th>公司</th>
      <th>部门</th>
      <th>职级</th>
      <th>备注</th>
      <th>最新购买时间</th>
      <th>最后更新时间</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(info, index) in dataList" :key="index">
      <td>{{info.nameCn}}</td>
      <td>
        {{info.firstName}}/{{info.lastName}}
      </td>
      <td>
        <span class="text-danger" v-if="info.vipLevel > 0">VIP-{{info.vipLevel}}</span>
      </td>
      <td>{{getGenderDesc(info.gender)}}</td>
      <td>{{info.birthday}}</td>
      <td>{{info.nationality}}</td>
      <td>
        <template v-for="(idInfo, index) in info.idInfos">
          <template v-if="index > 0"><br /></template>
          <span>{{showIdTypeDesc(idInfo.idType)}}: {{idInfo.idNo}}</span>
        </template>
      </td>
      <td>{{info.email}}</td>
      <td>{{info.mobile}}</td>
      <td>
        {{showCustomerName(info)}}
      </td>
      <td>
        <template v-if="info.department !== null">
          {{info.department.name}}
        </template>
      </td>
      <td>
        <template v-if="info.position !== null">
          {{info.position.name}}
        </template>
      </td>

      <td>{{info.remark}}</td>
      <td>
        <span v-if="info.latestBuyCount > 0">
          {{info.recency}}({{info.latestBuyCount}}次)
        </span>

      </td>
      <td>
        <span v-if="info.lastUpdate === null">{{info.createTime}}</span>
        <span v-else>{{info.lastUpdate}}</span>
      </td>
      <td>
        <router-link :to="`/passenger?id=` + info.id">修改</router-link>
      </td>
      <td>
        <router-link :to="`/passenger/` + info.id">详情</router-link>
      </td>
    </tr>

  </tbody>
</table>
</template>

<script>
import {
  showIdTypeDesc,
  showCustomerName,
  showGenderType
} from '@/common/common'
export default {
  props: {
    dataList: {
      type: Array
    }
  },
  methods: {
    getGenderDesc: function (val) {
      return showGenderType(val)
    },
    showIdTypeDesc: function (idType) {
      return showIdTypeDesc(idType)
    },
    showCustomerName: function (info) {
      return showCustomerName(info)
    }
  }
}
</script>
